<template>
  <o-modal
    v-model="isShow"
    :title="config.modalTitle"
    :size="config.modalSize || [560, 420]"
    :mask="true"
    :tap-close="false"
    :show-footer="true"
    @on-close="close"
  >
    <div slot="content" class="slot-container">
      <LineChartWithRuler :drawingInfo="drawingInfo" :config="config" />
    </div>
  </o-modal>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator';
import oModal from '@/components/base/modal/o-modal/index.vue';
import { T_srv, Tsrv, ifs, ts, tvs, vue } from '@/services';
import LineChartWithRuler from './LineChartWithRuler.vue';

interface DrawingInfo {
  drawingNumber: string;
  equipmentNumber: string;
  drawingBy: string;
  inspector: string;
  approvalBy?: string;
  date?: string;
  scale?: string;
  material?: string;
  remarks?: string;
}

interface config {
  modalTitle?: string;
  modalSize?: Array<number>;
  config?: any;
}

@Component({
  components: {
    LineChartWithRuler,
    oModal
  }
})
export default class cChartView extends Vue {
  @Prop() config: config;

  @Prop() id: number;

  // 图纸信息配置
  public drawingInfo: DrawingInfo = {
    drawingNumber: 'TEMP-2024-001',
    equipmentNumber: 'EQ-TEMP-001',
    drawingBy: '张三',
    inspector: '李四',
    approvalBy: '王五',
    date: new Date().toLocaleDateString(),
    scale: '1:1',
    material: '不锈钢316L',
    remarks: '温度监控图表 - 24小时连续监测'
  };

  // // 请求参数
  // private reqParam: any = null;

  // // 图表数据
  // private apiData: any[] = [];

  // 是否显示弹窗
  private isShow: boolean = false;

  created() {
    this.show();
    // this.init();
  }

  // private init() {
  //   this.reqParam = Tsrv.utils.clone(
  //     this.config?.config?.dataSource?.params,
  //     true
  //   );
  //   this.loadChartData();
  // }

  // private loadChartData() {
  //   this.getChartData().then(([resp, err]) => {
  //     if (err) {
  //       this.$msg(err);
  //       // this.setEchartsData([], []);
  //       // this.setEchartsData();
  //     }
  //     const chartData = wUnZipStr(resp?.data).getReturnData('data');
  //     Object.keys(chartData).forEach(key =>
  //       chartData[key].d.forEach(item => {
  //         this.apiData.push({
  //           name: new Date(item.t).toLocaleString(),
  //           value: item.v,
  //           type: item.label
  //         });
  //       })
  //     );
  //   });
  // }

  // private getChartData(): Promise<any> {
  //   const reqConfig = this.config.config;
  //   let param = Tsrv.utils.clone(this.reqParam, true);
  //   if (Tsrv.noValue(reqConfig?.dataSource?.url))
  //     return Promise.resolve([null, 'no url']);
  //   if (
  //     Tsrv.noValue(this.reqParam) ||
  //     Object.keys(this.reqParam).length === 0
  //   ) {
  //     param = {};
  //   }
  //   if (reqConfig?.dataSource?.method === 'post') {
  //     return Tsrv.standardPostReq<any, any>(param, reqConfig.dataSource.url);
  //   }
  //   let url: string = Tsrv.utils.clone(reqConfig.dataSource.url);
  //   if (!Tsrv.noValue(param) && Object.keys(param).length > 0) {
  //     url = url.concat('?');
  //     const ps = Object.keys(param);
  //     for (let i = 0; i < ps.length; i++) {
  //       if (i === ps.length - 1) {
  //         url = url.concat(`${ps[i]}=${param[ps[i]]}`);
  //       } else {
  //         url = url.concat(`${ps[i]}=${param[ps[i]]}&`);
  //       }
  //     }
  //   }
  //   return Tsrv.standardGetReq<any, any>({}, url);
  // }

  public show() {
    this.isShow = true;
  }

  public hide() {
    this.isShow = false;
  }

  public confirm() {
    this.$bus.$emit(`modal_${this.id}`, 'test');
    this.hide();
  }

  public close() {
    this.$bus.$emit(`modal_${this.id}`);
    this.hide();
  }
}
</script>

<style scoped>
.test-page {
  padding: 20px;
}

h2 {
  margin-bottom: 20px;
  color: #333;
}
</style>
